<template>
    <div class="home">
        <!-- 导航栏 -->
        <div class="nav">
            <div class="nav_left">
                <div class="greet">{{ greet }}</div>
                <div class="p1">
                    <van-icon name="location" size="12" />
                    梅溪湖中心店 —— 1.1km
                    <van-icon name="arrow" size="12" />
                </div>
            </div>
            <div class="nav_right">
                <div class="scan"></div>
                <div class="signIn"></div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="swipe_box">
            <van-swipe :autoplay="4000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 功能盒子 -->
        <div class="fn_box">
            <!-- 快速下单 -->
            <div class="quickOrder">
                <div class="quickOrder_left" @click="goMenu(false)">
                    <van-icon name="shop-o" size="30" />
                    <div>
                        <p class="p2">自提</p>
                        <p class="p3">在线点，到店取</p>
                    </div>
                </div>
                <div class="quickOrder_right" @click="goMenu(true)">
                    <van-icon name="logistics" size="30" />
                    <div>
                        <p class="p2">外送</p>
                        <p class="p3">30分钟必达</p>
                    </div>
                </div>
            </div>

            <!-- 其它功能 -->
            <div class="otherFn">
                <div>
                    <div class="fn1">
                        <div class="charge2send1">充2送1</div>
                    </div>
                    咖啡钱包
                </div>
                <div>
                    <div class="fn2"></div>
                    优惠联盟
                </div>
                <div>
                    <div class="fn3"></div>
                    送TA咖啡
                </div>
                <div>
                    <div class="fn4"></div>
                    瑞幸潮品
                </div>
                <div>
                    <div class="fn5"></div>
                    签到
                </div>
            </div>
        </div>

        <!-- 为你推荐 -->
        <div class="recommendForYou">
            <p class="p4">为你推荐</p>

            <div class="recommendForYou-box">
                <div
                    class="recommendForYou-content-box"
                    :style="{ width: `${recommendForYouData.length * 140}px` }"
                >
                    <div
                        class="content-box"
                        v-for="(item, index) in recommendForYouData"
                        :key="index"
                    >
                        <ProItem
                            :information="item"
                            :onClickDetailsFn="false"
                            :small="true"
                        >
                            <template>
                                <div class="add" @click="goDetails(item.pid)">
                                    <van-icon name="plus" />
                                </div>
                            </template>
                        </ProItem>
                    </div>
                </div>
            </div>
        </div>

        <!-- 潮品 -->
        <div class="trendyGoods">
            <div class="title">
                <div class="title_left">
                    <div class="p5">lunkin潮品</div>
                    <div class="p6">直邮到家</div>
                </div>
                <div class="title_right">MORE</div>
            </div>

            <div class="beizi_box">
                <div
                    class="beizi"
                    v-for="(item, index) in beiziData"
                    :key="index"
                >
                    <div class="img" :class="'img' + index"></div>
                    <div class="p7">{{ item.name }}</div>
                    <div class="bot">
                        <div class="L">
                            <div class="price">
                                ￥<span>{{ item.price }}</span>
                            </div>
                            <div class="volume">已售{{ item.volume }}</div>
                        </div>
                        <div class="R"><van-icon name="plus" /></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告 -->
        <div class="advertisement-box">
            <div class="advertisement">
                <img src="../assets/gg.png" alt="" />
            </div>
        </div>

        <div class="end">·&nbsp;&nbsp;luckin&nbsp;coffee&nbsp;&nbsp;·</div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import ProItem from '../components/ProItem.vue'
import { Dialog } from 'vant';

Vue.use(Lazyload);
export default {
    name: 'Home',
    components: {
        ProItem
    },
    data() {
        return {
            beiziData: [
                {
                    name: "英伦温暖马克杯·蓝",
                    price: 78,
                    volume: 479
                },
                {
                    name: "英伦温暖马克杯·红",
                    price: 78,
                    volume: 548
                },
                {
                    name: "联名陶瓷咖啡杯·白",
                    price: 248,
                    volume: 802
                },
                {
                    name: "联名陶瓷咖啡杯·蓝",
                    price: 248,
                    volume: 446
                },
                {
                    name: "瑞·民族之光·幸",
                    price: 1,
                    volume: 9999
                },
                {
                    name: "雪人双层陶瓷杯",
                    price: 98,
                    volume: 389
                }
            ],

            greet: '',
            // 轮播图
            images: [],
            // 为你推荐
            recommendForYouData: [],
            // 判断登录
            enroll: false,
        }
    },
    methods: {
        // 获取轮播图片
        getBanner() {
            this.axios({
                method: "GET",
                url: '/banner',
            }).then((result) => {


                if (result.data.code === 300) {
                    result.data.result.forEach((v) => {
                        this.images.push(v.bannerImg);
                    });

                }
            }).catch((err) => {

            });
        },

        //获取 为你推荐 的商品数据
        getTypeData() {
            this.axios({
                method: 'get',
                url: '/typeProducts',
                params: {
                    key: 'isHot',
                    value: 1
                }
            }).then(res => {

                if (res.data.code === 500) {
                    this.recommendForYouData = res.data.result;

                }

            }).catch(err => {

            })
        },

        // 前往商品详情
        goDetails(pid) {
            this.$router.push({ name: "Details", query: { pid }, });
        },

        // 问好
        SayHello() {
            let time = new Date().getHours()

            if (time >= 6 && time < 12) {
                this.greet = '早上好';
            }
            else if (time >= 12 && time < 14) {
                this.greet = '中午好';
            }
            else if (time >= 14 && time < 18) {
                this.greet = '下午好';
            }
            else if (time >= 18 || time < 24) {
                this.greet = '晚上好';
            }
            else if (time >= 0 || time < 6) {
                this.greet = '深夜好';
            }
        },

        // 自提f / 外送t
        goMenu(tf) {
            if (this.enroll) {
                sessionStorage.setItem("selfMention_Delivery", tf);
                this.$router.push({ name: "Menu" });
            } else {
                Dialog.confirm({
                    message: '请先登录！'
                }).then(() => {
                    this.$router.push({ name: "Logon" });
                }).catch(() => { });
            }
        },
        // 获取登录状态
        getFindMy() {
            this.axios({
                method: "GET",
                url: "/findMy"
            }).then((result) => {


                // 已经登录
                if (result.data.code === "A001") {
                    this.enroll = true;
                }
                this.getSearch(this.$route.query.val);
            }).catch((err) => {

            });
        }
    },
    // 初始化钩子
    created() {
        this.getBanner();
        this.getTypeData();
        this.SayHello();
        this.getFindMy()
        // 会话存储  默认配送方式
        sessionStorage.setItem("selfMention_Delivery", true);
    },
}
</script>

<style lang="less" scoped>
.home {
    position: fixed;
    overflow: scroll;
    top: 0;
    bottom: 50px;
    right: 0;
    left: 0;

    // 导航栏
    .nav {
        // height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;

        .nav_left {
            margin-left: 15px;
            .greet {
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 10px;
                margin-top: 10px;
            }
            .p1 {
                color: #c0c4c9;
            }
        }

        .nav_right {
            display: flex;
            .scan,
            .signIn {
                width: 24px;
                height: 24px;
                background: url('../assets/snipaste20211115_140700.png')
                    no-repeat -14px -15px;
                margin-right: 16px;
                margin-left: 6px;
            }
            .signIn {
                background-position: -58px -15px;
            }
        }
    }

    // 轮播图
    .swipe_box {
        /deep/ .van-swipe__indicators {
            bottom: 40px;
            .van-swipe__indicator {
                opacity: 0.5;
            }
            .van-swipe__indicator--active {
                width: 20px;
                background-color: #0c34ba;
                border-radius: 10px;
                opacity: 1;
            }
        }
    }

    // 功能盒
    .fn_box {
        padding: 58px 11px 0;
        position: relative;

        // 快速下单
        .quickOrder {
            position: absolute;
            display: flex;
            // width: 339px;
            width: 90%;
            top: -24px;
            margin: 0 7px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px 2px 3px 1px #f0f0f0;

            &::before {
                content: '';
                width: 1px;
                height: 70%;
                background-color: #e7e7e7;
                position: absolute;
                left: 50%;
                margin-right: 1px;
                top: 15%;
            }
            .quickOrder_left,
            .quickOrder_right {
                width: 50%;
                display: flex;
                align-items: center;
                padding: 11px 15px;

                i {
                    font-weight: 600;
                    margin-right: 10px;
                }
                .p2 {
                    font-weight: 600;
                    font-size: 16px;
                    margin-bottom: 8px;
                }
                .p3 {
                    color: #999;
                }
            }
        }

        // 其它功能
        .otherFn {
            display: flex;
            justify-content: space-between;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;

            > div {
                width: 60px;
                text-align: center;

                > div {
                    width: 40px;
                    height: 40px;
                    margin: 0 auto;
                    margin-bottom: 7px;
                    background-repeat: no-repeat;
                }
            }
            .fn1 {
                background-image: url('../assets/snipaste20211115_140807.png');
                background-position: -10px -6px;
                background-size: 56px;
                position: relative;

                .charge2send1 {
                    position: absolute;
                    right: -28px;
                    top: -13px;
                    color: #fff;
                    width: 48px;
                    text-align: center;
                    line-height: 18px;
                    border-bottom-right-radius: 10px;
                    border-top-left-radius: 10px;
                    background-image: linear-gradient(180deg, #dcc69f, #b09162);
                }
            }
            .fn2 {
                background-image: url('../assets/snipaste20211115_140827.png');
                background-position: -6px -7px;
                background-size: 200px;
            }
            .fn3 {
                background-image: url('../assets/snipaste20211115_140827.png');
                background-position: -80px -7px;
                background-size: 200px;
            }
            .fn4 {
                background-image: url('../assets/snipaste20211115_140827.png');
                background-position: -154px -7px;
                background-size: 200px;
            }
            .fn5 {
                background-image: url('../assets/snipaste20211115_140807.png');
                background-position: -10px -69px;
                background-size: 56px;
            }
        }
    }

    // 为你推荐
    .recommendForYou {
        .p4 {
            margin-top: 24px;
            margin-left: 13px;
            margin-bottom: 8px;
            font-size: 18px;
            font-weight: 600;
        }

        .recommendForYou-box {
            overflow: scroll;
            position: relative;

            .recommendForYou-content-box {
                display: flex;
                justify-content: space-between;
                padding: 10px 17px;

                .content-box {
                    width: 120px;

                    position: relative;

                    /deep/ .p1 {
                        color: #000;
                        font-weight: 600;
                        margin-bottom: 10px;
                        letter-spacing: 1px;
                    }
                    /deep/ .p2 {
                        display: none;
                    }
                    /deep/ .p3 {
                        font-weight: 400;
                    }
                    .add {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 22px;
                        height: 22px;
                        text-align: center;
                        line-height: 20px;
                        font-size: 20px;
                        font-weight: 600;
                        background-color: #070799;
                        color: #fff;
                        border-radius: 50%;

                        i {
                            font-size: 15px;
                            font-weight: 600;
                            transform: translateY(-1px);
                        }
                    }
                }
            }
        }
    }

    // 潮品
    .trendyGoods {
        margin-top: 50px;
        margin-bottom: 40px;
        padding: 0 15px;

        // 标题
        .title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            .title_left {
                display: flex;
                align-items: end;

                .p5 {
                    font-weight: 600;
                    font-size: 18px;
                    margin-right: 5px;
                }
                .p6 {
                    padding: 3px 4px 4px;
                    background-color: #1c1f22;
                    color: #fff;

                    box-shadow: 1px 1px 2px 1px #e99036;
                    border-top-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
            }

            .title_right {
                font-weight: 600;
                font-size: 16px;
                color: #c0c7ce;
            }
        }

        // 杯子盒
        .beizi_box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .beizi {
                width: 47%;

                .img {
                    margin: 30px auto;
                    width: 60px;
                    height: 100px;
                    background-repeat: no-repeat;
                    background-size: 270px;
                }
                .img0 {
                    background-image: url('../assets/beizi111.png');
                    background-position: -15px -10px;
                }
                .img1 {
                    background-image: url('../assets/beizi111.png');
                    background-position: -195px -10px;
                }
                .img2 {
                    background-image: url('../assets/beizi222.png');
                    background-position: -15px -10px;
                }
                .img3 {
                    background-image: url('../assets/beizi222.png');
                    background-position: -195px -10px;
                }
                .img4 {
                    background-image: url('../assets/beizi333.png');
                    background-position: -15px -10px;
                }
                .img5 {
                    background-image: url('../assets/beizi333.png');
                    background-position: -195px -10px;
                }

                .p7 {
                    font-weight: 600;
                    font-size: 16px;
                    margin-bottom: 14px;
                }
                .bot {
                    display: flex;
                    justify-content: space-between;

                    .L {
                        display: flex;
                        align-items: flex-end;
                        .price {
                            display: flex;
                            align-items: flex-end;
                            span {
                                font-size: 15px;
                                display: block;
                                font-weight: 600;
                                transform: translateY(1px);
                            }
                        }
                        .volume {
                            margin-left: 10px;
                            color: #999;
                            font-size: 12px;
                        }
                    }

                    .R {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        color: #fff;
                        background-color: #0c34ba;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        i {
                            transform: translateY(1px);
                            font-weight: 600;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }

    // 广告盒
    .advertisement-box {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 11px 20px;

        .advertisement {
            padding-top: 30px;
            border-top: 1px solid #f0f0f0;

            img {
                width: 100%;
                box-shadow: 0px 4px 5px 6px #f0f0f0;
                border-radius: 15px;
            }
        }
    }

    // 结束
    .end {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #798087;
    }
}
</style>